微交互的4大基本要素，提升用户体验

欢迎来到专业设计师学习交流社区

三分设｜连接知识，帮助全球 1 亿设计师成长

本文共 2217 字，预计阅读 6 分钟，记得点击上面的蓝字关注我们哟！

作者 | Naida Alabata译者 | Chloe审校 | 胖鱼、弹跳
编辑｜皮皮
译者推荐 | 在用户体验设计中，微交互变得越来越重要，它不仅指导用户使用产品、减少出错、安抚情绪，更是一种积极有效的沟通方式。在不断发展的互联网环境下，利用微交互加强与用户的互动，成为产品持续用户满足用户需求，吸引和留住用户的一个重要手段。

在这个充斥着错综复杂的数字平台和海量信息的世界里，微交互变得越来越重要。虽然在早期的数字设计中，它仅被认为是一个很酷的功能，但在如今竞争激烈的数字化环境下，微交互已经成为提升整体用户体验至关重要的元素。

由于用户能从微交互中体会到价值，微交互不仅能提升用户的参与度，更能激发用户对品牌产生好感，并最终影响用户的行为。

本文将讨论微交互的基础知识，以及如何利用它们来强化用户体验设计。

什么是微交互？

在数字化设计中，大多数用户与产品的交互中都会发现微交互。当你将鼠标悬停于文本上时，改变颜色以表示可以单击，当动画显示你的上传进度时，甚至有时会弹出消息，让用户知道输入了错误的密码。

这些细小的视觉提示和微妙的指示就是微交互。事实上，通常正确操作时，并不容易被用户注意到。无论多么细微的微交互都应该和整体的设计方案相结合，提供给用户浏览界面和执行基本功能的信息。

微交互是如何运作的

微交互具备四项基本要素：触发、规则、反馈以及循环/模式。这四要素有助于组织设计元素循环运作。

触发

例如轻敲按钮或是点击鼠标，这就是开启微交互过程的第一步。当满足某些条件时，系统也可启动它，比如收到消息时获得的声音通知。

这些触发动作被设定了一套既定的行动规则，规定了什么可行，什么不可行。

规则

规则基本决定了微交互一旦被触发后会发生什么，例如当你在Tinder上刷屏时，规则会显示你已经“超级喜欢”了某人。但规则也规定，除非他们也喜欢你，否则还是不能给他们发信息。

反馈

顾名思义，反馈就是让用户知道发生了什么，当微交互发生时，用户看到、听到甚至感觉到的任何东西都是反馈。例如，当你将手机设为震动状态，短暂的震动即是反馈。

循环/模式

循环/模式基本上定义了交互的性质，它是会闪现一次，还是会重复？随着时间的推移会发生什么？例如，循环可以是用户输入错误密码的次数，而模式是在五个密码错误后临时冻结账户。

如何在适当的时候使用微交互

1、页面动画

当我们说到页面动画的时候，可能是页面之间富有创意的转场动效或是一个很酷的滚动进度的图标。这类微交互帮助用户更好的理解页面之间的关系，甚至让浏览的过程更引人入胜。

2、轻划

类似地，当用户轻划页面时你也可以利用滑动功能平滑过渡到你的内容中。通过这种方式，可以为你的内容增加一些娱乐性(而无需登录交友应用)。

3、输入字段动效

你可能没见过喜欢填写表单的人，但是，字段动效至少可以使简单的过程变得清晰有趣，甚至能帮助用户填写表单。

4、状态动画

同时，在这个注意力分散娱乐需求至上的时代，没有用户愿意等待。但是通过在下载/上传状态等过程中使用动画，就可以显示用户的进展，并为原本枯燥的功能添加更多的乐趣。你甚至可以用它来增加你的品牌吸引力。

5、通知

说到通知，最好能给用户提供选则。例如，有些用户不喜欢突兀的消息通知，而另一些人则不介意 Facebook Messenger 的聊天气泡在他们观看 YouTube 视频时弹出。

Facebook 和 Instagram 将通知提升到了另一个层次，每当有人喜欢他们的帖子时，通知会让用户感到快乐，这使用户养成了喜欢收到消息通知的习惯。

6、下拉菜单

它已经成为智能手机操作系统的常用设计，因为它的用户界面非常友好。只需从屏幕顶部向下拉，就可以访问所有的通知和基本设置。易于导航是微交互最重要的功能之一，而下拉菜单正是实现了这一点。

7、强调按钮

你的“强调”存在是有原因的——那是因为你希望用户点击它们。在强调按钮中添加动画可以帮助刺激用户行为。至少，让他们对可能发生的事情感到好奇。

8、链接文本动画

给可点击的文本制作动画是一个不错的方式，可以将品牌创意融入简单的功能，比如回到主页，或只是表明其可以点击。

9、新手引导

微交互也是教育用户如何使用产品的好方法。可以通过简单的动画或图形指出基本功能，使产品易于使用，并揭示很酷的隐藏功能，以达到更好的用户体验。

要点

这些小细节都为提升用户体验增加了价值。如非侵入性的通知、一个很酷的状态动画，这类细小的功能可以让用户感受到关怀并对品牌产生好感。一旦建立了这种良好的关系，就可以影响用户的行为，使之与你的目标一致。随着数字化的发展和普及，产品想要脱颖而出变得越来越难，但这些微妙的微交互可以帮助你实现这一点。

原文：https://www.webdesignerdepot.com/2019/09/how-powerful-micro-interactions-boost-your-ux/

注：感谢阅读，以上内容由三分设｜ TCC 翻译情报局提供，如有收获，还望各位设友动动手指点下广告和在看，也可分享到你的朋友圈！

更多 TCC 好文推荐：

这篇文章我觉得还不错哟！👇